<template>
    <qly-base-page :title="$t('common.takeLeave')" ref="skyBasePageRef" type="data" padding="24rpx"
                   bg-page-color="#f5f5f5" footer-bg-color="#fff" footer-padding="12rpx 24rpx">
        <template #header>
            <tr-tabs v-model="params.type" :tabsList="tabsList"/>
        </template>
        <tr-card v-if="params.type === '0'" margin="0" padding="24rpx 24rpx 1rpx" border-radius="12rpx">
            <uni-forms class="bang-form" ref="formRef" err-show-type="toast" :model="form" :rules="rules"
                       label-position="top" label-width="300rpx">
                <uni-forms-item name="account" :label="$t('common.startTime')+'：'" required>
                    <uni-datetime-picker type="date" v-model="form.date"/>
                </uni-forms-item>
                <uni-forms-item name="account" :label="$t('common.endTime')+'：'" required>
                    <uni-datetime-picker type="date" v-model="form.date"/>
                </uni-forms-item>
                <uni-forms-item name="account" :label="$t('common.reasonForTakingLeave')+'：'" required>
                    <uni-easyinput type="textarea" v-model="form.account" :placeholder="placeholder"/>
                </uni-forms-item>
            
            </uni-forms>
        </tr-card>
        
        <leave v-show="params.type === '1'"/>
        <template #footer>
            <view class="btn-box">
                <up-button type="primary" @click="submit">{{ $t('common.submit') }}</up-button>
            </view>
        </template>
    </qly-base-page>
</template>
<script setup>
import leave from './components/leave.vue'

const placeholder = computed(() => {
    return $t('common.pleaseEnter') + " " + $t('common.reasonForTakingLeave')
})
const params = ref({
    type: '0'
})
const tabsList = computed(() => {
    return [
        {
            label: $t('common.initiateRequest'),
            value: '0'
        },
        {
            label: $t('common.viewData'),
            value: '1'
        }
    ]
})

const formRef = ref()
const form = ref({
    date: '',
    account: '',
    password: '',
    images: [],
    type: ""
})

const rules = {
    // 对name字段进行必填验证
    account: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
    password: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourPassword'),
            },
        ],
    }
}
const submit = async () => {
    const res = await qly.dialog.messageBox({
        title: '提示',
        message: `您还有排班未完成！请问是否要提交请假`,
        cancelText: '否',
        confirmText: '是',
    })
}
</script>
<style scoped lang="scss">

</style>
